<template>
	<div class="">
		<u-navbar placeholder title="" autoBack></u-navbar>
		<div :class="[!isPC ? 'edit-h5' : '']">
			<main class="content">
				<p>{{isAuthor?'修改群聊名称':'群聊名称'}}</p>
				<span class="tips" v-if="isAuthor">{{
              TUITranslateService.t(
                `TUIGroup.修改群聊名称后，将在群内通知其他成员`
              )
            }}</span>
				<div class="input-box">
					<div class="updata-name">
						<img class="avatar" :src="
						  groupProfile.avatar ||
						  'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
						" onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'" />
						<input ref="nameInputRef" class="input" v-model="inputGroupName" type="text"  :disabled="!isAuthor" minlength="2" maxlength="20" />
					</div>

					<span v-if="isAuthor">{{
            TUITranslateService.t(
              `TUIGroup.仅限2-20个字`
            )
          }}</span>
				</div>
				<footer class="edit-h5-footer" v-if="isAuthor">
					<button class="btn" @click="updateProfile">
						{{ TUITranslateService.t(`确认`) }}
					</button>
				</footer>
			</main>
		</div>
		<!-- <p v-if="!isEdit || !isPC" @click="close">
			<span>{{ groupProfile.name }}</span>
			<Icon :file="editIcon" v-if="isAuthor" width="14px" height="14px"></Icon>
		</p> -->
	</div>
</template>

<script lang="ts" setup>
	import { watchEffect, ref, nextTick, watch } from "../../../adapter-vue";
	import {
		TUITranslateService,
		IGroupModel,
		TUIStore,
		StoreName,
		TUIGroupService
	} from "@tencentcloud/chat-uikit-engine";
	import Icon from "../../common/Icon.vue";
	import editIcon from "../../../assets/icon/edit.svg";
	import { Toast, TOAST_TYPE } from "../../common/Toast/index";
	import { isPC, isUniFrameWork } from "../../../utils/env";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { checkUserInfo } from "../../../utils/checkLogin";
	const groupID = ref<any>('')
	const isAuthor = ref(false)
	const groupProfile = ref<IGroupModel>({});
	const inputGroupName = ref("");
	const nameInputRef = ref(null);
	onLoad((options : any) => {
		groupID.value = options.groupID
		isAuthor.value = options.isAuthor === 'true'
	})
	onShow(() => {
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					checkUserInfo()
					TUIGroupService.getGroupProfile({
						groupID: groupID.value,
					}).then((res) => {
						groupProfile.value = res.data.group
						inputGroupName.value = res.data.group.name
					}).catch((error) => {
						console.log(error, "异常")
					})
				}

			}
		})
	})
	const updateProfile = () => {
		if (!inputGroupName.value) {
			return Toast({
				message: TUITranslateService.t("TUIGroup.群名称不能为空"),
				type: TOAST_TYPE.ERROR,
			});
		}
		if (inputGroupName.value !== groupProfile.value.name) {
			TUIGroupService.updateGroupProfile({
				groupID: groupID.value,
				name:inputGroupName.value
			}).then(res=>{
				let currentGroup = res.data.group;
				//通知管理页更新当前信息
				TUIStore.update(StoreName.GRP, 'currentGroup', currentGroup)
				uni.navigateBack()
			})
		}
	};
</script>

<style lang="scss" scoped>
	@import url("../../../assets/styles/common.scss");

	page {
		background: #ffffff;
	}







	.edit-h5 {
		width: 100%;
		height: 100%;
		display: flex;

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding:24rpx;

			>p {
				font-weight: 600;
				font-size: 34rpx;
				margin: 60rpx 0 20rpx 0;
			}

			.tips {
				color: #999;
				font-size: 28rpx;
				width: 576rpx;
				letter-spacing: 4rpx;
			}

			.input-box {

				.updata-name {
					display: flex;
					width: 600rpx;
					border-top: 1px solid #ececec;
					border-bottom: 1px solid #ececec;
					padding: 10rpx 0;
					margin: 20rpx 0;

					.input {
						flex: 1;
						height: 72rpx;
						border-radius: 4px;
						padding: 4px 16px;
						font-weight: 400;
						font-size: 14px;
						color: #000000;
						opacity: 0.6;
					}
				}

				span {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 12px;
					color: #888888;
					letter-spacing: 0;

				}
			}

		}
		.edit-h5-footer{
			position: fixed;
			bottom: 100rpx;
			.btn {
				width: 300rpx;
				border: none;
				background: linear-gradient(90deg, #FA3121 0%, #FC7844 100%);
				border-radius: 5px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 16px;
				color: #ffffff;
				letter-spacing: 0;
				line-height: 27px;
				padding: 8px 0;
			
				&:disabled {
					opacity: 0.3;
				}
			}
		}

		
	}
</style>